<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>
    window.onload=function(){
        var c=document.getElementById("mycanvas");//获取canvas对象
        var  context=c.getContext("2d");//构建2d环境
        context.beginPath();
        context.moveTo(70,30);//作线的起点
        context.lineTo(30,140);//线的终点
        context.lineTo(125,70);
        context.lineTo(10,70);
        context.lineTo(100,140);
        context.closePath();//结束/闭合
        context.strokeStyle="red";//线的颜色
        context.stroke();//线的输出

        context.beginPath();
        context.moveTo(200,30);
        context.lineTo(160,140);
        context.lineTo(257,70);
        context.lineTo(140,70);
        context.lineTo(231,140);
        context.closePath();//结束/闭合
        context.fillStyle="gold";//填充的背景色
        context.fill()//填充
    }
</script>
<body>
    <canvas id="mycanvas" style="width:300px;height:150px; background:black;"></canvas>
    
</body>
</html>